<template>
  <div class="Sidebar">
    <i-menu class="ul" v-if="items!=''" width="auto" :active-name="active" :class="menuitemClasses">
      <!-- 折叠按钮 -->
      <div class="collapseChage">
        <span class="spn1">功能导航</span>
        <Icon type="md-menu" size="28" @click.native="collapsedSider"/>
      </div>
      <template v-for="item in items">
        <template v-if="item.subNav">
          <Submenu :name=item.title>
            <template slot="title">
              <Icon :type="item.icon" size="25"/>
              <span>{{item.title}}</span>
            </template>
            <MenuItem :name=subItem.name v-for="(subItem,i) in item.subNav" style="padding-left: 25px;">
              <router-link :to=subItem.name
                           style="color: #333333;display: inline-block;padding: 14px 24px;width: 100%;">
                {{subItem.title}}
              </router-link>
            </MenuItem>
          </Submenu>
        </template>
        <template v-else>
          <MenuItem :name=item.name>
            <router-link :to='item.name' style="color: #333333;display: inline-block;padding: 14px 24px;width: 200px;">
              <Icon :type="item.icon" size="25"/>
              <span>{{item.title}}</span>
            </router-link>
          </MenuItem>
        </template>
      </template>
    </i-menu>
  </div>
</template>

<script>
  import bus from '../bus';

  export default {
    data() {
      return {
        active: 'ArticleInformationManagement',
        isCollapsed: false,
        userid: [],
        items: [
          /*          {
            title: '编辑助手',
            icon: 'logo-freebsd-devil',
            subNav: [
              {
                name: "DocumentFormatCheck",
                title: "文献格式校验",
              },
              {
                name: "ProofreadForTypos",
                title: "错别字校对",
              },
              {
                name: "ManuscriptInnovationIndex",
                title: "稿件创新指数",
              },
            ]
          },
          {
            name: 'ArticleInformationManagement',
            title: '文章资讯管理',
            icon: 'md-contact',
          },
          {
            name: 'ConsultantIntroductionManagement',
            title: '顾问介绍管理',
            icon: 'md-contact',
          },
          {
            name: 'ContactInformationManagement',
            title: '联系方式管理',
            icon: 'md-contact',
          },
          {
            name: 'ContributionEvaluationManagement',
            title: '投稿评估管理',
            icon: 'md-contact',
          },
          {
            name: 'ContributionGuideManagement',
            title: '投稿指南管理',
            icon: 'md-contact',
          },
          {
            name: 'EditingActivityManagement',
            title: '编辑活动管理',
            icon: 'md-contact',
          },
          {
            name: 'ExcellentJournalManagement',
            title: '期刊管理',
            icon: 'md-contact',
          },
          {
            name: 'IndustryDynamicManagement',
            title: '行业动态管理',
            icon: 'md-contact',
          },
          {
            name: 'JobDynamicManagement',
            title: '工作动态管理',
            icon: 'md-contact',
          },
          {
            name: 'JournalFranchiseManagement',
            title: '期刊加盟管理',
            icon: 'md-contact',
          },
          {
            name: 'ManuscriptManagement',
            title: '稿件管理',
            icon: 'md-contact',
          },
          {
            name: 'NoticeManagement',
            title: '公告通知管理',
            icon: 'md-contact',
          },
          {
            name: 'OnlineCourseManagement',
            title: '线上课程管理',
            icon: 'md-contact',
          },
          {
            name: 'OrganizationIntroductionManagement',
            title: '机构介绍管理',
            icon: 'md-contact',
          },
          {
            name: 'RoleAuthorityManagement',
            title: '角色权限管理',
            icon: 'md-contact',
          },
          {
            name: 'SubmissionProcessManagement',
            title: '投稿流程管理',
            icon: 'md-contact',
          },
          {
            name: 'UserManagement',
            title: '用户管理',
            icon: 'md-contact',
          },*/
        ],
      }
    },
    computed: {
      menuitemClasses() {
        return [
          'menu-item',
          this.isCollapsed ? 'collapsed-menu' : ''
        ]
      }
    },
    methods: {
      collapsedSider() {
        this.isCollapsed = !this.isCollapsed;
        bus.$emit('collapse', this.isCollapsed);
      },
      get(URL, parameter) {
        this.$axios.get(URL + parameter).then((res) => {
          this.items = res.data
        });
      },
    },
    mounted() {
      this.active = this.$route.path.replace("/", "");
      if (document.body.clientWidth < 1200) {
        this.collapsedSider();
      }
      this.userid = localStorage.getItem('ms_userid');
      this.get(this.$api.url, '/user/enter/' + this.userid)
    }
  }
</script>

<style scoped>
  .Sidebar .collapseChage {
    padding: 14px 20px;
    border-bottom: 1px solid #ccc;
  }

  .Sidebar .collapseChage .spn1 {
    font-size: 18px;
    font-weight: bold;
  }

  .ul .ivu-menu-item {
    border-bottom: 1px solid #ccc;
    padding: 0 0;
  }

  .menu-item span {
    display: inline-block;
    overflow: hidden;
    width: 90px;
    white-space: nowrap;
    vertical-align: bottom;
    transition: width .2s ease .2s;
    font-weight: bold;
  }

  .menu-item i {
    transform: translateX(0px);
    transition: font-size .2s ease, transform .2s ease;
    vertical-align: middle;
    font-size: 16px;
  }

  .collapsed-menu span {
    width: 0px;
    transition: width .2s ease;
  }
</style>
